<template>
  <div style="margin: 0 10px;" class="fullHeight setFlexBox">
    <div style="float:right;margin:5px 0px 5px 5px;justify-content:flex-end" class="setLineFlexBox">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        style="text-align: right; padding-right: 0px;"
        label-width="68px"
      >
        <el-form-item label="文件名称" prop="ctName" style="margin-bottom: 0px;">
          <el-input
            v-model="queryParams.ctName"
            placeholder="请输入文件名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item style="margin-bottom: 0px;margin-right: 0px;">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">刷新</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="flexOne setFlexBox">
      <div class="flexOne">
        <el-table height="calc(100% - 10px)" :data="fileblobList" ref="myTable" border :cell-style="cellStyle">
          <el-table-column label="序号" align="center" width="60px" prop="rowNumber" />
          <el-table-column
            label="文件来源"
            align="center"
            width="100px"
            header-align="center"
            prop="ctType"
            :formatter="changeType"
          />
          <el-table-column label="文件名称" align="left" header-align="center" prop="ctName" />
          <el-table-column label="文件类型" align="center" width="100px" prop="ctFileType" />
          <el-table-column label="上传日期" align="center" width="160px" prop="dtDate">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.dtDate, '{y}-{m}-{d} {h}:{i}') }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="120px"
          >
            <template slot-scope="scope">
              <el-button
                size="medium"
                type="text"
                icon="el-icon-view"
                @click="handlePreview(scope.row)"
                title="预览"
              ></el-button>
              <el-button
                size="medium"
                type="text"
                icon="el-icon-download"
                @click="handleDownload(scope.row)"
                title="下载"
              ></el-button>
              <el-button
                size="medium"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-if="canSave"
                title="删除"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
       class="paginationPage"
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import {
  delFileblob,
  listFileblob,
  getFileblobToken,
  downloadFile,
} from '@/api/fileList/fileList'
import store from '@/store/index'
import { getFunNo } from '@/utils/party'

export default {
  name: 'ListFiles',
  data: () => ({
    store: store,
    // 遮罩层
    loading: true,
    ids: [],
    // 总条数
    total: 0,
    // 业务附件表格数据
    fileblobList: [],
    //校验Token
    uuid: '',
    funNo: location.hash.slice(-4),
    // 查询参数（父窗体直接控制）
    queryParams: {
      pageNum: 1,
      pageSize: 20,
      ctName: null,
      ctIdP: '999',
    },
    //可否保存
    canSave: true,
  }),
  created () {
    console.log(this.canSave)
  },
  methods: {
    /** 查询业务附件列表 */
    getList() {
      if (this.store.state.dynamic.singleStore['main' + this.funNo]) {
        const subSingleStore =
          this.store.state.dynamic.singleStore['main' + this.funNo]
            .subSingleStore['sub' + this.funNo]
        this.queryParams.ctIdP =
          subSingleStore === undefined ? null : subSingleStore.ctId
      }
      this.queryParams.ctTypeList = ['01', '02']
      this.loading = true
      listFileblob(this.queryParams)
        .then((response) => {
          this.loading = false
          this.fileblobList = response.rows
          this.total = response.total
          this.$emit('updateTotal', this.total)
        })
        .catch(() => {
          this.loading = false
        })
      getFileblobToken(this.queryParams)
        .then((response) => {
          this.uuid = response.msg
        })
        .catch(() => {
          this.loading = false
        })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },

    /** 预览 */
    handlePreview(row) {
      if (row.ct_fun_no == undefined) {
        row.ct_fun_no = this.queryParams.ctFunNo
      }
      row.ct_id = row.ctIdP
      store.dispatch('setFilePreview', row).then(() => {
        this.$router.push({ path: '/SpsPublicRouter/FilePreview' })
      })
    },
    /** 下载 */
    handleDownload(row) {
      downloadFile({ ctId: row.ctId, uuid: this.uuid }).then((response) => {
        this.misDonwloadFile(response, row.ctName + row.ctFileType)
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ctIds = row.ctId || this.ids
      this.$confirm(
        '是否确认删除业务附件编号为"' + ctIds + '"的数据项?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(function () {
          return delFileblob(ctIds)
        })
        .then(() => {
          this.getList()
          this.msgSuccess('删除成功')
        })
    },
    /** 转化类型 */
    changeType: function (row, column) {
      return row.ctType == '02' ? '站外附件' : '站内附件'
    },
    cellStyle: function (data) {
      let style = 'padding:0px;'
      if (data.columnIndex == 1) {
        if (data.row.ctType && data.row.ctType == '02') {
          style += 'color:red;'
        }
      }
      return style
    },
  },
}
</script>
